<template>
  <el-form size="mini" label-position="left" label-width="62px" v-model="HInfo">
    <el-card class="margin-bottom">
      <div slot="header" class="clearfix relative small-header">
        <el-row>
          <el-col
            :sm="24"
            :md="24"
            :lg="22"
            :xl="22"
            class="flex  align-center justify-start"
          >
            <div class="title-icon ">
              <!-- {{ waybillSingleId }} 自增记录 没实现 -->
              <span style="align:left;">分单{{ index }} </span>
              <span style="align:left;margin-left:100px;"> </span>
            </div>
            <el-form-item
              prop="waybillNo"
              class="margin-lr"
              style="margin-bottom:0"
            >
              <div slot="label">H单号:</div>
              <span>{{ waybillData.waybillNo }}</span>
            </el-form-item>
            <div class="flex header-input-box align-center">
              <!--<el-button type="primary" size="mini" @click="downloadHawb">
                导出HAWB
              </el-button>-->
              <el-dropdown>
                <el-button
                  type="primary"
                  size="mini"
                  @click.native="downloadHawb('excel')"
                >
                  导出HAWB<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="downloadHawb('excel')"
                    >EXCEL</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="downloadHawb('pdf')"
                    >PDF</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
              <div class="margin-left">运单号：{{ masterNumber }}</div>
              <el-form-item
                prop="serviceTotalPackages"
                class="margin-lr"
                style="margin-bottom:0"
              >
                <div slot="label">件数：</div>
                <el-input
                  v-if="isChangeHInfo"
                  type="text"
                  size="mini"
                  v-model="HInfo.serviceTotalPackages"
                ></el-input>

                <span v-else>{{ waybillData.serviceTotalPackages }}</span>
              </el-form-item>
              <el-form-item
                prop="serviceActualWeight"
                class="margin-lr"
                style="margin-bottom:0"
              >
                <div slot="label">实重：</div>
                <el-input
                  v-if="isChangeHInfo"
                  type="text"
                  size="mini"
                  v-model="HInfo.serviceActualWeight"
                ></el-input>

                <span v-else>{{ waybillData.serviceActualWeight }}</span>
              </el-form-item>
              <el-form-item
                prop="serviceChargedWeight"
                class="margin-lr"
                style="margin-bottom:0"
              >
                <div slot="label">计费重：</div>
                <el-input
                  v-if="isChangeHInfo"
                  type="text"
                  size="mini"
                  v-model="HInfo.serviceChargedWeight"
                ></el-input>

                <span v-else>{{ waybillData.serviceChargedWeight }}</span>
              </el-form-item>
              <el-form-item
                prop="serviceVolumeWeight"
                class="margin-lr"
                style="margin-bottom:0"
              >
                <div slot="label">体积重：</div>
                <el-input
                  v-if="isChangeHInfo"
                  type="text"
                  size="mini"
                  v-model="HInfo.serviceVolumeWeight"
                ></el-input>

                <span v-else>{{ waybillData.serviceVolumeWeight }}</span>
              </el-form-item>
              <el-form-item
                prop="serviceVolume"
                class="margin-lr"
                style="margin-bottom:0"
              >
                <div slot="label">体积：</div>
                <el-input
                  v-if="isChangeHInfo"
                  type="text"
                  size="mini"
                  v-model="HInfo.serviceVolume"
                ></el-input>

                <span v-else>{{ waybillData.serviceVolume }}</span>
              </el-form-item>
            </div>
          </el-col>
          <el-col
            :sm="24"
            :md="24"
            :lg="2"
            :xl="2"
            class="flex  align-center justify-end"
          >
            <el-button
              type="success"
              size="mini"
              class="header-save-btn"
              @click="changeHInfo"
            >
              {{ isChangeHInfo ? "保存" : "编辑" }}
            </el-button>
          </el-col>
        </el-row>
      </div>

      <el-row :gutter="10">
        <el-col :span="4">
          <el-form-item prop="houseNumberSender">
            <div slot="label">发件人:</div>

            <div v-if="isChangeHInfo">
              <el-select
                v-model="HInfo.serachSender"
                filterable
                placeholder="请输入内容"
              >
                <el-option
                  v-for="item in restaurants"
                  :key="item.value"
                  :label="item.label"
                  @click.native="selectSenderM('houseNumberSender')"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-input
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 12 }"
                v-model="waybillRelevance.houseNumberSender"
              ></el-input>
            </div>
            <span v-else>{{ waybillRelevance.houseNumberSender }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="houseNumberReceiver">
            <div slot="label">收件人:</div>

            <div v-if="isChangeHInfo">
              <el-select
                v-model="HInfo.serachReceiver"
                filterable
                placeholder="请输入内容"
              >
                <el-option
                  v-for="item in restaurants"
                  :key="item.value"
                  :label="item.label"
                  @click.native="selectSenderM('houseNumberReceiver')"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-input
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 12 }"
                v-model="waybillRelevance.houseNumberReceiver"
              ></el-input>
            </div>
            <span v-else>{{ waybillRelevance.houseNumberReceiver }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="houseNumberNotifier">
            <div slot="label">通知人:</div>

            <div v-if="isChangeHInfo">
              <el-select
                v-model="HInfo.serachNotifier"
                filterable
                placeholder="请输入内容"
              >
                <el-option
                  v-for="item in restaurants"
                  :key="item.value"
                  :label="item.label"
                  @click.native="selectSenderM('houseNumberNotifier')"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-input
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 12 }"
                v-model="waybillRelevance.houseNumberNotifier"
              ></el-input>
            </div>
            <span v-else>{{ waybillRelevance.houseNumberNotifier }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="houseNumberAgent">
            <div slot="label">代理:</div>

            <div v-if="isChangeHInfo">
              <el-select
                v-model="HInfo.serachAgent"
                filterable
                placeholder="请输入内容"
              >
                <el-option
                  v-for="item in restaurants"
                  :key="item.value"
                  :label="item.label"
                  @click.native="selectSenderM('houseNumberAgent')"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-input
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 12 }"
                v-model="waybillRelevance.houseNumberAgent"
              ></el-input>
            </div>
            <span v-else>{{ waybillRelevance.houseNumberAgent }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="nameDescription">
            <div slot="label">品名描述:</div>
            <div>
              <el-button
                type="text"
                size="mini"
                @click="synchronizedProductName"
              >
                同步品名
              </el-button>
              <el-input
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 12 }"
                v-model="waybillRelevance.nameDescription"
              ></el-input>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="dimension">
            <div slot="label">尺寸:</div>
            <el-button type="text" size="mini"> </el-button>
            <div>
              <el-input
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 12 }"
                v-model="waybillRelevance.dimension"
              ></el-input>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <GoodsInfo
        :waybillId.sync="waybillSingleId"
        :indexSort.sync="index"
        v-if="pageType == 'seaFreight'"
      ></GoodsInfo>
    </el-card>
  </el-form>
</template>

<script>
import { ajax, actionPermission } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { m } from "@/store/yg/common/local";
import GoodsInfo from "./GoodsInfo";
export default {
  components: {
    GoodsInfo
  },
  props: {
    initOptionsData: {
      type: Object,
      default: function() {
        return {};
      }
    },
    pageType: {
      type: String,
      default: ""
    },
    simpleWaybillForEditWaybillMergeAlls: {
      type: Array,
      default: function() {
        return [{}];
      }
    },
    waybillSingleId: {
      type: Number,
      default: 1
    },
    index: {
      type: Number,
      default: 1
    },
    waybillData: {}
  },
  data() {
    return {
      syncIds: [],
      mergeId: "",
      dataChange: false,
      firstwaybillRelevance: false,
      masterNumber: "",
      restaurants: [],
      isChangeHInfo: false,
      serviceTotalPackagesTotal: 0,
      waybillRelevance: {},
      HInfo: {
        id: 0,
        waybillId: 0,
        houseNumber: 1, // H单号：
        houseNumberSender: 1, // H单号：发件人
        houseNumberReceiver: 1, // H单号：收件人
        houseNumberNotifier: 1, // H单号：通知人
        houseNumberAgent: 1, // H单号：代理
        serachSender: "",
        serachReceiver: "",
        serachNotifier: "",
        serachAgent: ""
      }
    };
  },
  watch: {
    simpleWaybillForEditWaybillMergeAlls: {
      handler(newVal, oldVal) {
        if (
          !this.dataChange &&
          newVal &&
          newVal != undefined &&
          null != newVal
        ) {
          this.dataChange = true;
          console.log(">>>>>>>", newVal);
          var data = newVal;
          data.forEach(simpleWaybillForEditWaybillMergeAll => {
            console.log(
              ">>>>>>>>>>id",
              this.waybillData.id,
              simpleWaybillForEditWaybillMergeAll.waybillSingleId
            );
            if (
              this.waybillData.id ===
              simpleWaybillForEditWaybillMergeAll.waybillSingleId
            ) {
              console.log(">>>>>>>>>>是同一个id");
              this.syncIds.push(simpleWaybillForEditWaybillMergeAll.id);
              var waybillSingleNo =
                simpleWaybillForEditWaybillMergeAll.waybillSingleNo;
              if (
                simpleWaybillForEditWaybillMergeAll.inStockTotalPackages != null
              ) {
                this.serviceTotalPackagesTotal =
                  this.serviceTotalPackagesTotal +
                  simpleWaybillForEditWaybillMergeAll.inStockTotalPackages;
              }
              this.masterNumber =
                this.masterNumber +
                simpleWaybillForEditWaybillMergeAll.waybillNo +
                "/";
              // if (!this.firstwaybillRelevance) {
              //   this.waybillRelevance = JSON.parse(
              //     JSON.stringify(simpleWaybillForEditWaybillMergeAll)
              //   );
              //   this.firstwaybillRelevance = true;
              // }
              //不再取第一个运单的数据 在mounted使用了 this.waybillRelevance = this.waybillData;
            }
          });
          if (!this.waybillData.serviceTotalPackages) {
            this.waybillData.serviceTotalPackages = this.serviceTotalPackagesTotal;
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    var head =
      document.head ||
      document.getElementsByTagName("head")[0] ||
      document.documentElement;
    var baseUrl = head.baseURI;
    if (
      null != baseUrl &&
      baseUrl != "" &&
      baseUrl.indexOf("waybill__seafreightmerge__main") != -1
    ) {
      this.pageType = "seaFreight";
    } else if (
      null != baseUrl &&
      baseUrl != "" &&
      baseUrl.indexOf("waybill__airfreightmerge__main") != -1
    ) {
      this.pageType = "airFreight";
    }

    this.loadAll();
    // console.log(this.waybillData);
    this.HInfo = this.waybillData;
    this.waybillRelevance = this.waybillData;
    if (
      this.HInfo.houseNumberNotifier == null ||
      this.HInfo.houseNumberNotifier == ""
    ) {
      this.HInfo.houseNumberNotifier = "SAME AS CONSIGNEE";
    }
    this.HInfo.waybillId = this.waybillData["id"];
    // this.waybillSingleId = this.waybillSingleId + 1;
  },
  methods: {
    loadAll() {
      ajax("getOptionsByparam", { type: "serveCompany" }).then(
        res => {
          if (res.code != 200) {
            this.$message.error(res.message);
          } else {
            if (null != res.data) {
              this.restaurants = res.data;
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    synchronizedProductName() {
      var param = {};
      param["ids"] = this.syncIds;
      param["waybillId"] = this.waybillData.id;

      ajax("synchronizedProductName", param).then(
        res => {
          console.log(res);
          if (res.code != 200) {
            this.$message.error("运单无品名可同步");
          } else {
            if (null == res.data) {
              this.$message.error("运单无品名可同步");
            } else {
              this.waybillRelevance.nameDescription = res.data;
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    selectSenderM(type) {
      var parmValue = "";
      if (type === "houseNumberSender") {
        parmValue = this.HInfo.serachSender;
      } else if (type === "houseNumberReceiver") {
        parmValue = this.HInfo.serachReceiver;
      } else if (type === "houseNumberNotifier") {
        parmValue = this.HInfo.serachNotifier;
      } else if (type === "houseNumberAgent") {
        parmValue = this.HInfo.serachAgent;
      }
      console.log(">>>>>,queryByid", this.waybillData.id);
      ajax("queryServiceCompanyById", { id: parmValue }).then(
        res => {
          if (res.code != 200) {
            this.$message.error(res.message);
          } else {
            if (null != res.data) {
              var serviceCompany = res.data;
              var html =
                serviceCompany["companyNameEn"] +
                "\n" +
                serviceCompany["companyAddressEn"] +
                "\n" +
                "TEL:" +
                serviceCompany["firstContactPhone"] +
                "\n" +
                serviceCompany["vatNumber"];
              var updateParams = {};
              if (type === "houseNumberSender") {
                updateParams["houseNumberSender"] = html;
                this.waybillRelevance.houseNumberSender = html;
              } else if (type === "houseNumberReceiver") {
                updateParams["houseNumberReceiver"] = html;
                this.waybillRelevance.houseNumberReceiver = html;
              } else if (type === "houseNumberNotifier") {
                updateParams["houseNumberNotifier"] = html;
                this.waybillRelevance.houseNumberNotifier = html;
              } else if (type === "houseNumberAgent") {
                updateParams["houseNumberAgent"] = html;
                this.waybillRelevance.houseNumberAgent = html;
              }

              updateParams["id"] = this.waybillRelevance.id;

              this.updateHInfo(updateParams);
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    updateHInfo(param) {
      ajax("changeHInfo", param).then(
        res => {
          console.log(res);
          if (res.code != 200) {
            this.$message.error(res.message);
          } else {
            console.log(res.data);
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    downloadHawb(type) {
      var param = {};
      param["id"] = this.waybillSingleId;
      param["param1"] = type;
      ajax("exportMarkedSingleHawb", param).then(
        res => {
          console.log(res);
          if (null != res.errorMesage && res.errorMesage != "") {
            this.$message.error(m(res.errorMesage));
          } else {
            var path = constant.FILE_SERVER + res.path;
            location.href =
              constant.API_SERVER +
              "/open/downloadFileByHttp?fileName=" +
              res.fileName +
              "&path=" +
              path +
              res.fileName;
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    changeHInfo() {
      if (this.isChangeHInfo) {
        this.isChangeHInfo = false;
        var param = this.HInfo;
        param["nameDescription"] = this.waybillRelevance.nameDescription;
        param["dimension"] = this.waybillRelevance.dimension;
        param["houseNumberAgent"] = this.waybillRelevance.houseNumberAgent;
        param[
          "houseNumberNotifier"
        ] = this.waybillRelevance.houseNumberNotifier;
        param[
          "houseNumberReceiver"
        ] = this.waybillRelevance.houseNumberReceiver;
        param["houseNumberSender"] = this.waybillRelevance.houseNumberSender;
        ajax("changeSingleHInfo", param).then(
          res => {
            console.log(res);
            if (res.code != 200) {
              this.$message.error(res.message);
            } else {
              console.log(res.data);
            }
          },
          error => {
            console.log(error);
          }
        );
      } else {
        this.isChangeHInfo = true;
      }
    }
  }
};
</script>

<style scoped>
/deep/ .el-select {
  width: 100%;
}

.btn-header >>> .el-card__header {
  padding: 8px 20px;
}

.header-input-box >>> .el-input.el-input--mini {
  width: 80px;
}
</style>
